<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - 在线购物系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .btn-primary {
                @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-md active:scale-95;
            }
            .btn-secondary {
                @apply bg-secondary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-secondary/90 hover:shadow-md active:scale-95;
            }
            .form-input {
                @apply w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-700">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="MainServlet?method=index" class="flex items-center space-x-2">
                        <i class="fa fa-shopping-bag text-2xl text-primary"></i>
                        <span class="text-xl font-bold text-neutral-700">ShopEase</span>
                    </a>
                </div>
                
                <nav class="hidden md:flex space-x-8">
                    <a href="MainServlet?method=index" class="text-neutral-700 hover:text-primary font-medium transition-colors">首页</a>
                    <a href="MainServlet?method=showProduct" class="text-primary font-medium border-b-2 border-primary pb-1">商品</a>
                    <a href="#" class="text-neutral-700 hover:text-primary font-medium transition-colors">关于我们</a>
                </nav>
                
                <div class="flex items-center space-x-4">
                    <a href="seller_login.jsp" class="hidden sm:block px-4 py-2 text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors">
                        卖家登录
                    </a>
                    <button class="md:hidden text-neutral-700" id="mobile-menu-button">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-white border-t" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="MainServlet?method=index" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-700 hover:text-primary hover:bg-neutral-100">首页</a>
                <a href="MainServlet?method=showProduct" class="block px-3 py-2 rounded-md text-base font-medium text-primary bg-primary/5">商品</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-700 hover:text-primary hover:bg-neutral-100">关于我们</a>
                <a href="seller_login.jsp" class="block px-3 py-2 rounded-md text-base font-medium text-primary hover:bg-primary/5">卖家登录</a>
            </div>
        </div>
    </header>

    <!-- 消息提示 -->
    <c:if test="${not empty msg}">
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6 animate-fade-in-down">
            <p>${msg}</p>
        </div>
    </c:if>

    <!-- 商品详情 -->
    <section class="py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <c:if test="${product == null}">
                <div class="bg-white rounded-xl p-8 text-center shadow-sm">
                    <div class="w-16 h-16 bg-neutral-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-exclamation-triangle text-2xl text-neutral-500"></i>
                    </div>
                    <h3 class="text-xl font-bold text-neutral-700 mb-2">暂无可用商品</h3>
                    <p class="text-neutral-500 mb-6">目前没有可供购买的商品，请稍后再来查看。</p>
                    <a href="MainServlet?method=index" class="btn-primary inline-flex items-center">
                        返回首页 <i class="fa fa-home ml-2"></i>
                    </a>
                </div>
            </c:if>
            
            <c:if test="${product != null}">
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="md:flex">
                        <!-- 商品图片 -->
                        <div class="md:w-1/2 bg-neutral-100 p-6 flex items-center justify-center">
                            <div class="relative w-full max-w-lg">
                                <img src="${product.imagePath != null ? product.imagePath : 'https://picsum.photos/id/26/800/600'}" 
                                     alt="${product.name}" 
                                     class="w-full h-auto rounded-lg shadow-md object-cover transition-transform duration-500 hover:scale-105">
                                <c:if test="${product.status == 2}">
                                    <div class="absolute top-4 right-4 bg-yellow-500 text-white text-sm font-medium px-3 py-1 rounded-full">
                                        已被选中
                                    </div>
                                </c:if>
                            </div>
                        </div>
                        
                        <!-- 商品信息 -->
                        <div class="md:w-1/2 p-8">
                            <div class="mb-2">
                                <span class="inline-block px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-4">
                                    ${product.status == 1 ? '可购买' : product.status == 2 ? '处理中' : '已售出'}
                                </span>
                                <h1 class="text-2xl md:text-3xl font-bold text-neutral-700 mb-4">${product.name}</h1>
                                <div class="flex items-center mb-4">
                                    <div class="flex text-yellow-400">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                    </div>
                                    <span class="text-neutral-500 text-sm ml-2">4.5 (120 评价)</span>
                                </div>
                            </div>
                            
                            <div class="mb-6">
                                <span class="text-3xl font-bold text-neutral-700">¥${product.price}</span>
                                <span class="text-neutral-500 ml-2">价格透明，无隐藏费用</span>
                            </div>
                            
                            <div class="mb-8">
                                <h3 class="text-lg font-semibold text-neutral-700 mb-2">商品描述</h3>
                                <p class="text-neutral-500 leading-relaxed">${product.description}</p>
                            </div>
                            
                            <div class="mb-8">
                                <h3 class="text-lg font-semibold text-neutral-700 mb-2">商品状态</h3>
                                <p class="text-neutral-500">
                                    <i class="fa fa-clock-o mr-2"></i>
                                    发布时间: ${product.createdTime}
                                </p>
                            </div>
                            
                            <div class="flex flex-col sm:flex-row gap-4">
                                <button class="btn-primary flex-1 flex items-center justify-center" id="buy-now-btn">
                                    <i class="fa fa-shopping-cart mr-2"></i> 提交购买意向
                                </button>
                                <button class="bg-neutral-100 text-neutral-700 px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-neutral-200">
                                    <i class="fa fa-heart-o"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 购买意向表单 -->
                <div class="mt-8 bg-white rounded-xl shadow-sm p-8 hidden" id="purchase-form">
                    <h2 class="text-2xl font-bold text-neutral-700 mb-6">提交购买意向</h2>
                    <form action="PurchaseServlet?method=submit" method="post">
                        <input type="hidden" name="productId" value="${product.id}">
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label for="buyerName" class="block text-neutral-700 font-medium mb-2">姓名</label>
                                <input type="text" id="buyerName" name="buyerName" class="form-input" required>
                            </div>
                            
                            <div>
                                <label for="phone" class="block text-neutral-700 font-medium mb-2">联系电话</label>
                                <input type="tel" id="phone" name="phone" class="form-input" required>
                            </div>
                            
                            <div class="md:col-span-2">
                                <label for="location" class="block text-neutral-700 font-medium mb-2">交易地点</label>
                                <input type="text" id="location" name="location" class="form-input" required>
                            </div>
                            
                            <div>
                                <label for="amount" class="block text-neutral-700 font-medium mb-2">交易金额</label>
                                <input type="number" id="amount" name="amount" value="${product.price}" class="form-input" step="0.01" min="0" required>
                            </div>
                            
                            <div>
                                <label for="deposit" class="block text-neutral-700 font-medium mb-2">定金金额</label>
                                <input type="number" id="deposit" name="deposit" value="${product.price * 0.2}" class="form-input" step="0.01" min="0" required>
                            </div>
                            
                            <div class="md:col-span-2">
                                <label for="tradeTime" class="block text-neutral-700 font-medium mb-2">期望交易时间</label>
                                <input type="datetime-local" id="tradeTime" name="tradeTime" class="form-input" required>
                            </div>
                        </div>
                        
                        <div class="flex justify-end gap-4">
                            <button type="button" class="px-6 py-3 border border-neutral-300 rounded-lg font-medium transition-all duration-300 hover:bg-neutral-100" id="cancel-form">
                                取消
                            </button>
                            <button type="submit" class="btn-secondary">
                                提交意向 <i class="fa fa-paper-plane ml-2"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </c:if>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-neutral-700 text-white pt-16 pb-8 mt-16">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <i class="fa fa-shopping-bag text-2xl text-white"></i>
                        <span class="text-xl font-bold">ShopEase</span>
                    </div>
                    <p class="text-neutral-300 mb-6">让购物变得轻松愉快，为您提供优质的商品和服务。</p>
                </div>
                
              
                
              
                
               <div>
                    <h3 class="text-lg font-semibold mb-6">联系我们</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-neutral-300"></i>
                            <span class="text-neutral-300">杭州市下沙区浙江工商大学</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3 text-neutral-300"></i>
                            <span class="text-neutral-300">19012356489</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3 text-neutral-300"></i>
                            <span class="text-neutral-300">2868000391@qq.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-neutral-600 pt-8 text-center text-neutral-400">
                <p>&copy; 2025 ShopEase 在线购物系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 购买意向表单切换
        if (document.getElementById('buy-now-btn')) {
            document.getElementById('buy-now-btn').addEventListener('click', function() {
                document.getElementById('purchase-form').classList.remove('hidden');
                // 平滑滚动到表单
                document.getElementById('purchase-form').scrollIntoView({
                    behavior: 'smooth'
                });
            });
        }
        
        if (document.getElementById('cancel-form')) {
            document.getElementById('cancel-form').addEventListener('click', function() {
                document.getElementById('purchase-form').classList.add('hidden');
            });
        }
        
        // 设置默认日期时间（当前时间加1小时）
        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            now.setHours(now.getHours() + 1);
            const dateTimeValue = now.toISOString().slice(0, 16);
            
            const datetimeInput = document.getElementById('tradeTime');
            if (datetimeInput) {
                datetimeInput.value = dateTimeValue;
            }
            
            // 显示消息提示后3秒自动隐藏
            const msgElement = document.querySelector('.bg-green-100');
            if (msgElement) {
                setTimeout(() => {
                    msgElement.style.opacity = '0';
                    msgElement.style.transition = 'opacity 0.5s ease';
                    setTimeout(() => msgElement.remove(), 500);
                }, 3000);
            }
        });
    </script>
</body>
</html>